<!-- 话费、电费充值记录 -->
<template>
    <div class="lifePayCostBill">
        <van-nav-bar title="充值记录" fixed placeholder left-arrow :border="false" @click-left="onClickLeft"/>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
                v-if="list.length > 0"
                v-model:loading="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <div class="billItem flex alignCenter" v-for="item in list" :key="item.id" @click="goDetail(item)">
                    <img v-if="item.orderType == 2" src="@/assets/lifePayCost/phoneChargeIcon.png" alt="">
                    <img v-else src="@/assets/lifePayCost/electricityChargeIcon.png" alt="">
                    <div class="flex flexColumn allFlex">
                        <div>{{hidePhone(item.account)}}</div>
                        <div class="time">{{item.createTime}}</div>
                    </div>
                    <div class="flex flexColumn alignEnd">
                        <div class="themeColor">{{item.facePrice}}</div>
                        <div :class="`status status${item.orderStatus}`">{{externalOrderStatus(item.orderStatus)}}</div>
                    </div>
                </div>
            </van-list>
            <van-empty v-else style="margin-top:100px" image-size="4rem" description="暂无数据" >
                <template #image>
                    <img class="fieldIcon" src="@/assets/empty/emptyBill.png" alt="">
                </template>
            </van-empty>
        </van-pull-refresh>
    </div>
</template>

<script>
import { ref, reactive, getCurrentInstance } from 'vue';
import { NavBar , List , PullRefresh , Empty  } from 'vant';
import storage from 'store';

export default {
    components: {
        [NavBar.name]: NavBar,
        [PullRefresh.name]: PullRefresh,
        [List.name]: List,
        [Empty.name]: Empty,
    },
    setup() {
        const { proxy } = getCurrentInstance();
        // 返回上一页
        const onClickLeft = () => history.back();

        const loading = ref(false);
        const finished = ref(false);
        const refreshing = ref(false);
        const onLoad = () => {
            if (refreshing.value) {
                list.value = [];
                refreshing.value = false;
            }
            queryRecord();
        };

        const onRefresh = () => {
            // 清空列表数据
            finished.value = false;
            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            loading.value = true;
            page.value = 0;
            onLoad();
        };

        // 查询充值记录
        const list = ref([]);
        const page = ref(0);
        const queryRecord = () => {
            const params = {
                'merchantNo': storage.get('merchantNo'),
                'orderType': proxy.$route.params.orderType,
                'account': proxy.$route.params.account,
                'page': page.value,
                'size': 10,
            }
            proxy.$http.externalApi.queryRechargeRecord(params)
            .then(res=>{
                if(res.success){
                    if(page.value == 0){
                        list.value = res.data.data.content
                    }else{
                        list.value = [...list.value,...res.data.data.content]
                    }
                    loading.value = false;
                    page.value++
                    if((page.value * 10) > res.data.data.totalElements){
                        finished.value = true;
                    }
                }else{
                    proxy.$toast({position: 'bottom',message:res.errMessage})
                }
            })
        }
        queryRecord();

        // 跳转详情
        const goDetail = (order) =>{
            proxy.$router.push({name: 'lifePayCostBillDetail', params: {'order': JSON.stringify(order)}})
        }

        return {
            onClickLeft,
            list,
            onLoad,
            loading,
            finished,
            onRefresh,
            refreshing,
            goDetail,
        }
    }
}

</script>
<style scoped>
.lifePayCostBill{
    min-height: 100vh;
    background: url('../../assets/lifePayCost/electricityChargeHeadNanBg.png') no-repeat;
    background-size: 100%;
}
.lifePayCostBill /deep/ .van-nav-bar{
    background: var(--themeColor);
}
.lifePayCostBill /deep/ .van-icon{
    color: #FFFFFF;
}
.lifePayCostBill /deep/ .van-nav-bar__title{
    color: #FFFFFF;
}

.billItem{
    height: 65px;
    margin: 6px 12px;
    border-radius: 8px;
    background: #FFFFFF;
    padding: 0 13px;
    box-sizing: border-box;
}
.billItem img{
    width: 33px;
    height: 33px;
    display: inline-block;
    margin-right: 5.5px;
}
.account{
    font-size: 15px;
    color: #333333;
    font-weight: bold;
}
.time{
    font-size: 12px;
    color: #999999;
}
/* 状态 */
.status{
    font-size: 11px;
}
.status0{
    color: #faad14
}
.status1{
    color: #52c41a
}
.status2{
    color: #f5222d
}
.status3{
    color: #faad14
}
.status4{
    color: #faad14
}
.status5{
    color: #52c41a
}
.status6{
    color: #faad14
}
.status7{
    color: #f5222d
}
.status8{
    color: #52c41a
}
</style>